<template>
  <div>
      <button @click="sendMsg">发送msg</button>
      <button @click="getUsers">获取所有User</button>
      <button @click="setUser">插入一个User</button>

      <!-- <p v-if="user">{{ user.id }}</p>
      <p v-if="user">{{ user.name }}</p>
      <p v-if="user">{{ user.createTime }}</p>
      <p v-if="user">{{ user.updateTime }}</p> -->

      <ul>
        <li v-for="(item, index) in users" :key="index">
          {{ item.id }} <br>
          {{ item.name }} <br>
          {{ item.createTime }} <br>
          {{ item.updateTime }} <br>
        </li>
      </ul>


  </div>
</template>

<style scoped>

</style>


<script setup>  
  import axios from 'axios'
  import {ref,reactive} from 'vue'
  const  msg='hello 后端'

  const sendMsg =async ()=>{
    try{
      const jsonString =JSON.stringify(msg)
      console.log(jsonString)
      const response = await axios.post('http://localhost:8081/teach/sendmsg', jsonString,
      {
        headers: {
        'Content-Type': 'application/json'
        } 
      }
    )
      console.log('响应：', response.data)
      
    } catch(error){
      console.log('发送数据时出错：', error)
    }
  }

  const users = ref()
  const getUsers = async ()=>{
    try{
      // const jsonString =JSON.stringify(msg);
      // console.log(jsonString);
      const response = await axios.get('http://localhost:8081/teach/getusers')
      console.log('响应：', response.data)
      users.value = response.data
      
    } catch(error){
      console.log('发送数据时出错：', error)
    }
  }

  const setUser = async ()=>{
    const jsonString = {
      'id': '2',
      'name': 'LongSir'
    }
    try{
      // const jsonString =JSON.stringify()
      console.log(jsonString)
      const response = await axios.post('http://localhost:8081/teach/setuser', jsonString,
      {
        headers: {
        'Content-Type': 'application/json'
        } 
      }
    )
      console.log('响应：', response.data)
      
    } catch(error){
      console.log('发送数据时出错：', error)
    }
  }

</script>